<template>
    <div class="card mb-0" id="bill-detail-flight" v-if="detailInfo !== undefined && detailInfo !== null && detailInfo.tickets.length > 0">
      <div class="card-header" v-if="!hideLabel">机票明细</div> 
      <table class="table table-striped table-hover table-sm mb-0">
        <thead v-if="!hideLabel">
            <tr>
                <th>票号</th>
                <th>乘客</th>
                <th>出票日期</th>
                <th class="text-center bg-info text-white" colspan="7">行程</th>
                <th>票面价</th>
                <th>销售价</th>
                <th>税</th>
                <th>保险 </th>
                <th>代理费</th>
                <th>服务费</th>
                <th>优惠</th>
                <th class="bg-info text-white">总计</th>
                <th class="bg-info text-white">成本</th>
                <th class="bg-info text-white">利润</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
          <template  v-for="(info, index) in detailInfo.tickets">
            <tr :key="info.id">   
                <td>
                  {{ info.showTicketNo }}
                </td>
                <td>
                    {{info.passengerName}}
                </td>
                <td>{{info.etdzDate}}</td>
                <td>
                    <template v-for="flt in info.details">
                      <span :key="flt.id">{{flt.dport}}{{flt.dportName}} {{flt.dterm}}<br/></span>
                    </template>
                </td>
                <td>
                    <template v-for="flt in info.details">
                      <span :key="flt.id">{{flt.aport}}{{flt.aportName}} {{flt.aterm}}<br/></span>
                    </template>
                </td>
                <td>
                    <template v-for="flt in info.details">
                      <span :key="flt.id">{{flt.flight}}<br/></span>
                    </template>
                </td>
                <td>
                    <template v-for="flt in info.details">
                      <span :key="flt.id">{{flt.subclass}}<br/></span>
                    </template>
                </td>
                <td>
                    <template v-for="flt in info.details">
                      <span :key="flt.id">{{flt.ddate}}<br/></span>
                    </template>
                </td>
                <td>
                    <template v-for="flt in info.details">
                      <span :key="flt.id">{{flt.dtime}}<br/></span>
                    </template>
                </td>
                <td>
                    <template v-for="flt in info.details">
                      <span :key="flt.id">{{flt.atime}}<br/></span>
                    </template>
                </td>
                <td>{{info.price}}</td>
                <td>{{info.parvalue}}</td>
                <td>{{info.tax}}</td>
                <td>{{info.insurance}}</td>
                <td>{{info.commission}}</td>
                <td>{{info.serviceCharge}}</td>
                <td>{{info.discount}}</td>
                <td>{{info.accountRecv}}</td>
                <td>{{info.cost}}</td>
                <td>{{info.profit}}</td>
                <td>
                  <template v-if="detailInfo.bePaid !== '1' && index > 0">
                    <button class="btn btn-warning" @click.stop="splitBill(info.id)">分离帐单</button>
                  </template>
                </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
</template>

<script>
import { splitFlightBill } from '@/api/bill.js'
  export default {
    props: {
      detailInfo: {
        type: Object
      },
      hideLabel: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      splitBill: function(ticketId) {
        splitFlightBill(this.detailInfo.id, ticketId, v => {
          console.log(v)
          if (v.status === 'OK') {
            this.$emit("refresh")
          }
        })
      }
    }
  }	
</script>